<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- plugins:css -->
<link rel="stylesheet" href="/node_modules/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css">
<!-- endinject -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="/node_modules/jquery-bar-rating/dist/themes/css-stars.css">
<link rel="stylesheet" href="/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="/css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="/images/favicon.png" />

	<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

	<style>
		/*用于拟态框验证*/
		#defaultForm>.form-group .error {
			color: red;
		}
	</style>

</head>
<body>
<div class="container-scroller">

	<!--顶部-->
	<div th:replace="~{commons/commons::top}"></div>

<!-- partial -->
<div class="container-fluid page-body-wrapper">
  <div class="row row-offcanvas row-offcanvas-right" >

	  <!--	  侧边-->
	  <div th:replace="~{commons/commons::cebian}"></div>

	<!-- partial -->
	  <div class="card content-wrapper" >
		  <div class="card-body" style="background-color: white">
			  <h4 class="card-title">Insert video</h4>
			  <p class="card-description">

			  </p>
			  <form action="/admin/add/videoInsert" id="defaultForm" class="forms-sample" method="post" enctype="multipart/form-data">
				  <div class="form-group">
					  <label for="video_name">视频名</label>
					  <input type="text" class="form-control" name="video_name" id="video_name" placeholder="例如：喜欢你">
				  </div>
				  <div class="form-group">
					  <label for="singer_id">歌手名</label>
					  <select class="form-control selectpicker show-tick" name="singer_id" id="singer_id" data-live-search="true">
						  <div th:each="singerBean:${singerBeanList}">
							  <option th:value="${singerBean.id}">[[${singerBean.name}]]</option>
						  </div>
					  </select>
				  </div>
				  <div class="form-group">
					  <label for="file1">上传视频封面</label>
				 	 <input id="file1" name="file1" type="file" class="file" data-show-preview="false" accept="image/*">
				  </div>
				  <div class="form-group">
					  <label for="file2">上传视频</label>
					  <input id="file2" name="file2" type="file" class="file" data-show-preview="false" accept="video/*">
				  </div>
				  
				  <button type="submit" class="btn btn-success mr-2">Submit</button>
			  </form>
		  </div>
	  </div>

	<!-- partial -->
  </div>





	<!-- row-offcanvas ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="/node_modules/chart.js/dist/Chart.min.js"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="/js/off-canvas.js"></script>
<script src="/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="/js/dashboard.js"></script>
<!-- End custom js for this page-->




<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script src="/js/videoInsert-valid.js"></script>


</body>
<script>
	//点击提交
	// $.validator.setDefaults({
	//   submitHandler: function() {
	//     alert("提交事件!");
	//   }
	// });
	$().ready(function() {
		$("#defaultForm").validate();
	});


</script>

</html>
